<template>
  <!-- 国际化 -->
   <!-- <el-config-provider :locale="locale">
    <router-view></router-view>
   </el-config-provider> -->
  <RouterView></RouterView>
  <!-- <hr />

  <h1 ref="title1">你好</h1>
  <h1>name:{{ name }}</h1>
  <h1>age:{{ age }}</h1>
  <h1>obj:{{ obj }}</h1>
  <hr />

  <h1>name1:{{ name1 }}</h1>
  <h1>name2:{{ name2 }}</h1>
  <h1>计算属性拼接name1和name:{{ fullName }}</h1>
  <hr />

  <input type="text" v-model="sum" />
  <br />

  <button @click="changeName">改变name</button>
  <button @click="changeAge">改变age</button>
  <button @click="changeObj">修改整个obj对象</button>
  <button @click="test">测试获取子组件的dom</button>
  <hr />-->
  <!-- 子组件 -->
  <!--<zi :car="car" ref="ren" @hhh="hhh"></zi> -->
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRef,
  toRefs,
  watch,
  computed,
  onMounted,
  getCurrentInstance
} from 'vue'
// import i18n from '@/locales/index'
// import { ElConfigProvider } from 'element-plus'
// import enUS from 'element-plus/es/locale/lang/en-us'
// import zhCN from 'element-plus/es/locale/lang/zh-cn'
// const locale = computed(() => (i18n.global?.locale === 'zh-CN' ? zhCN : enUS))

import zi from '@/components/zi.vue'
import useSum from '@/hooks/useSum'
import { RouterView } from 'vue-router'
const { ctx } = getCurrentInstance() //获取this  ctx就是this 和vue2中用法一样
let { sums, increment, decrement } = useSum()
// console.log(sums.value, '我是hooks里面sums的解构使用')

let name1 = ref('李四')
let name2 = ref('王二')
let sum = ref(0)
// let obj = reactive({});    //reactieve 定义的对象不能直接赋值  比如obj = {name：'张三''}   这样就不是响应式了    ref定义的就可以直接赋值
let obj = ref({ name: '张三', age: 18, gender: '男' })

const state = reactive({
  a: 1,
  b: {
    c: true
  }
})

// console.log(state, 'state')

let title1 = ref()
let ren = ref()
const car = ref('奔驰')

/* 测试生命周期的使用 */
onMounted(() => {
  // console.log('h1的dom', title1.value) //获取h1的dom
})

/* watch */
// watch 监听复杂数据类型
watch(
  obj,
  (newVal, oldVal) => {
    console.log('obj变化了', newVal, oldVal)
  },
  { deep: true }
)

// watch 监听简单数据类型
const textWatch = watch(sum, (newVal, oldVal) => {
  console.log('sum变化了--------')
  // if(newVal > 10) {
  //   textWatch() // 再次调用就是终止
  // }
})

/* computed */
let fullName = computed(() => {
  return name1.value + '---' + name2.value
})

/* 
toRefs
 */
// toRefs  ref 和 reactive定义的数据都能结构 并且都是响应式的
let { name, gender, age } = toRefs(obj.value) //解构obj
const changeName = () => {
  name.value = '我是toRefs测试改变name'
}
const changeAge = () => {
  age.value = '我是测试改变age'
}
const changeObj = () => {
  // 这里整个对象赋值-->只能是ref定义的响应式数据
  obj.value = { name: '测试改变', age: 90, gender: '女' }
}

/* 
子组件
 */
// 获取子组件的dom
const test = () => {
  console.log(ren.value)
  console.log(ren.value.title1, '子组件的数据打印')
  console.log(ctx.$refs.ren)
}
// 监听子组件发射的事件
const hhh = () => {
  console.log('我监听了子组件发射的事件hhh')
}
</script>

<style scoped></style>
